<template>
    <div>
        <!-- 标题栏 -->
        <van-nav-bar title="自动生成食谱" style="background-color: #FFD85F;" class="headera">
            <template #left>
                <van-icon name="arrow-left" @click="goBack" />
            </template>
        </van-nav-bar>



        <div style="background-color: #FFF7E1; min-height: 100vh; padding: 20px;">
            <!-- 输入框 -->
            <div class="input-container">
                <div class="field">
                    <van-field v-model="inputValues.protein" label="蛋白质 (g)" placeholder="请输入蛋白质克数" />
                </div>
                <div class="field">
                    <van-field v-model="inputValues.fat" label="脂肪 (g)" placeholder="请输入脂肪克数" />
                </div>
                <div class="field">
                    <van-field v-model="inputValues.calories" label="卡路里 (kcal)" placeholder="请输入卡路里数" />
                </div>
                <div class="field">
                    <van-field v-model="inputValues.carbohydrate" label="碳水 (g)" placeholder="请输入碳水克数" />
                </div>
            </div>

            <!-- 生成食谱按钮 -->
            <div class="button-wrapper">
                <van-button type="primary" block class="generate-button" @click="generateRecipe">
                    生成食谱
                </van-button>
            </div>

            <!-- 生成的食谱列表 -->
            <div v-if="recipes.length > 0">
                <van-card v-for="(recipe, index) in recipes" :key="index" :title="recipe.recipeName"
                    :desc="recipe.description" :num="recipe.servings" :price="recipe.calories + ' kcal'"
                    :thumb="recipe.imageUrl" @click="viewRecipeDetail(recipe.id)" />
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            inputValues: {
                protein: '',
                fat: '',
                calories: '',
                carbohydrate: '',
            },
            recipes: [] // 存储返回的食谱数据
        };
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        generateRecipe() {
            console.log("1", this.inputValues.protein)
            axios({
                url: "http://localhost:8081/nutrition/generatea",
                method: 'POST',
                params: {
                    protein: this.inputValues.protein || 0,
                    fat: this.inputValues.fat || 0,
                    carbohydrate: this.inputValues.carbohydrate || 0,

                    calories: this.inputValues.calories || 0,
                },
                headers: {
                    token: localStorage.getItem("token") // 从 localStorage 取 token
                }
            }).then(res => {
                console.log(res)
                this.recipes = res.data;
            })
            // 假设后端返回的数据格式：
            // { data: [{ id: 1, name: "食谱名", description: "详情", image: "图片地址", calories: 200, servings: 2 }] }



        },

        // 查看食谱详情
        viewRecipeDetail(id) {
            this.$router.push({ name: 'FoodDetails', params: { id: id } });
        },
    },
};
</script>

<style scoped>
.input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    padding: 10px;
    background: #fff7e1;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.generate-button {
    background-color: #FFD85F;
    color: black;
    font-weight: bold;
    border-radius: 20px;
    margin-top: 20px;
}
</style>
